<!-- 
个人中心页面
 * @Author: zuobufan
 * @Location: 安庆石化信息中心
 * @LastEditors: zuobufan
 * @CreateEditTime: 2021-09-17 9:24:00
 -->
<template>
  <div>
    <header >
      <img :src="avatarSrc" alt>
      <section @click="openModal">{{nickname}}</section>
      <van-icon :name="isLogin ? 'cross' : 'arrow'" @click="Logout"/>
    </header>
    <van-grid :column-num="3" square>
      <van-grid-item v-for="(item,index) in mydata" :key="index" :icon="item.icon" :text="item.title"/>
    </van-grid>
    <div class="login-modal" v-show="isShowModal">
      <div class="close-modal" @click="isShowModal=!isShowModal"></div>
      <van-form @submit="onSubmit" class="login-form">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { LoginApi } from "@/request/api";
import { stringify } from "querystring";
import { setTimeout } from "timers";
import { Dialog } from 'vant';
export default {
  data() {
    return {
      // 有无token 是否已登录
      isLogin: localStorage.getItem("token"),
      avatarSrc: require("../assets/user.png"),
      username: "admin",
      password: "123456",
      isShowModal: false,
      nickname: "点击登录",
       mydata: [
        { title: "我的订单", icon: "label-o" },
        { title: "优惠券", icon: "bill-o" },
        { title: "礼品卡", icon: "goods-collect-o" },
        { title: "我的收藏", icon: "location-o" },
        { title: "我的足迹", icon: "flag-o" },
        { title: "会员福利", icon: "contact" },
        { title: "地址管理", icon: "aim" },
        { title: "账号安全", icon: "warn-o" },
        { title: "联系客服", icon: "service-o" },
        { title: "帮助中心", icon: "question-o" },
        { title: "意见反馈", icon: "smile-comment-o" },
      ],
    };
  },
  created() {
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.nickname = userInfo.nickname;
      this.avatarSrc = userInfo.avatar;
    }
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      let username = values["用户名"];
      let pwd = values["密码"];
      LoginApi({ username, pwd }).then(res => {
        if (res.errno == 0) {
          console.log(res.data);
          this.$toast.success("登录成功");
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));

          setTimeout(() => {
            this.isShowModal = !this.isShowModal;
            this.avatarSrc = res.data.userInfo.avatar;
            this.nickname = res.data.userInfo.nickname;
          }, 1000);
        }
      });
    },
    openModal() {
      let token = localStorage.getItem("token");
      if (token) {
        return;
      }
      this.isShowModal = !this.isShowModal;
    },
    // 退出登录
    Logout() {
      // 清除 localStorage
      Dialog.confirm({
        title: "登出账号确认",
        message: "您是否想要退出当前账号？"
      })
        .then(() => {
          // on confirm
          localStorage.clear();
          this.$router.go(0);
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>
<style lang="less" scoped>
* {
  font-size: 0.14rem;
}
.login-modal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  // background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  .login-form {
    width: 90%;
    background-color: #fff;
    padding-bottom: 0.2rem;
    position: absolute;
    left: 50%;
    top: 35%;
    margin-left: -45%;
  }
  .close-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

header {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 10px;
  height: 70px;
  img {
    width: 70px;
    border-radius: 50%;
  }
  section {
    flex: 1;
    margin-left: 10px;
    font-size: 0.18rem;
  }
}
</style>